<!--
 * @Description: 
 * @Author: Zourongsheng
 * @Date: 2021-07-17 09:49:46
 * @LastEditors: Zourongsheng
 * @LastEditTime: 2021-07-17 11:28:06
-->
<template>
  <div>
       <div class="demo-title">
        <h1>杭州部分地区的疫情度</h1>
  
    </div>

    <div id="Zoursmap"></div>
  </div>
</template>

<script>
export default {
    mounted(){
          var map = new AMap.Map('Zoursmap', {
          zoom: 11.14,
          viewMode: '3D',
          pitch: 45,
          mapStyle: 'amap://styles/grey',
          center: [120.109233,30.246411],
          showBuildingBlock: false,
          showLabel: false,
      });

      var loca = window.loca = new Loca.Container({
          map,
      });

      loca.ambLight = {
          intensity: 0.3,
          color: '#fff',
      };
      loca.dirLight = {
          intensity: 0.6,
          color: '#fff',
          target: [0, 0, 0],
          position: [0, -1, 1],
      };
      loca.pointLight = {
          color: 'rgb(100,100,100)',
          position: [120.24289, 30.341335, 20000],
          intensity: 3,
          // 距离表示从光源到光照强度为 0 的位置，0 就是光不会消失。
          distance: 50000,
      };
      var geo = new Loca.GeoJSONSource({
          url: 'https://a.amap.com/Loca/static/loca-v2/demos/mock_data/hz_gn.json',
      });

      var colors = ['#fa0e00', '#ffb261', '#9FE084', '#5ACA70', '#00AF53', '#00873A', '#006B31', '#004835', '#003829'].reverse();
      // .reverse()
      var height = [1000, 2000, 4000, 6000, 8000, 10000, 12000, 14000, 16000];
      var pl = new Loca.PolygonLayer({
          // loca,
          zIndex: 120,
          opacity: 0.8,
          // cullface: 'none',
          shininess: 10,
          hasSide: true,
      });

      pl.setSource(geo);
      pl.setStyle({
          topColor: function (index, feature) {
              var v = feature.properties.health * 100;
              return v < 40 ? colors[0] :
                  v < 50 ? colors[1] :
                      v < 55 ? colors[2] :
                          v < 60 ? colors[3] :
                              v < 65 ? colors[4] :
                                  v < 70 ? colors[5] :
                                      v < 75 ? colors[6] :
                                          v < 80 ? colors[7] :
                                              v < 100 ? colors[8] : 'green';
          },
          sideColor: function (index, feature) {
              // var v = feature.properties.value;
              var v = feature.properties.health * 100;
              return v < 40 ? colors[0] :
                  v < 50 ? colors[1] :
                      v < 55 ? colors[2] :
                          v < 60 ? colors[3] :
                              v < 65 ? colors[4] :
                                  v < 70 ? colors[5] :
                                      v < 75 ? colors[6] :
                                          v < 80 ? colors[7] :
                                              v < 100 ? colors[8] : 'green';
          },
          height: function (index, feature) {
              var v = feature.properties.health * 100;
              return v < 40 ? height[0] :
                  v < 50 ? height[1] :
                      v < 55 ? height[2] :
                          v < 60 ? height[3] :
                              v < 65 ? height[4] :
                                  v < 70 ? height[5] :
                                      v < 75 ? height[6] :
                                          v < 80 ? height[7] :
                                              v < 100 ? height[8] : 0;
          },
          altitude: 0,
      });
      loca.add(pl);

      // 图例
      var lengend = new Loca.Legend({
          loca: loca,
          title: {
              label: '疫情度',
              fontColor: '#eee',
          },
          style: {
              backgroundColor: 'rgba(255,255,255,0.1)',
              left: '20px',
              bottom: '40px',
          },
          dataMap: [
              { label: 100, color: colors[8] },
              { label: 80, color: colors[7] },
              { label: 75, color: colors[6] },
              { label: 70, color: colors[5] },
              { label: 65, color: colors[4] },
              { label: 60, color: colors[3] },
              { label: 55, color: colors[2] },
              { label: 50, color: colors[1] },
              { label: 40, color: colors[0] },
          ],
      });


      // 创建纯文本标记
      var text = new AMap.Text({
        text: '纯文本标记',
        anchor: 'center', // 设置文本标记锚点
        draggable: true,
        cursor: 'pointer',
        angle: 0,
        visible: false,
        offset: [0, -25],
        style: {
          'padding': '5px 10px',
          'margin-bottom': '1rem',
          'border-radius': '.25rem',
          'background-color': 'rgba(0,0,0,0.5)',
          // 'width': '12rem',
          'border-width': 0,
          'box-shadow': '0 2px 6px 0 rgba(255, 255, 255, .3)',
          'text-align': 'center',
          'font-size': '16px',
          'color': '#fff',
        },
      });
      text.setMap(map);
      // 拾取
      map.on('mousemove', (e) => {
        var feat = pl.queryFeature(e.pixel.toArray());

        if (feat) {
          text.show();
          var health = feat.properties.health;
          text.setText(feat.properties.name + ' 疫情度：' + parseInt(health * 100) + ' %');
          text.setPosition(e.lnglat);

          pl.setStyle({
            topColor: (index, feature) => {
              if (feature === feat) {
                return [164, 241, 199, 0.5];
              }
              var v = feature.properties.health * 100;
              return v < 40 ? colors[0] :
              v < 50 ? colors[1] :
              v < 55 ? colors[2] :
              v < 60 ? colors[3] :
              v < 65 ? colors[4] :
              v < 70 ? colors[5] :
              v < 75 ? colors[6] :
              v < 80 ? colors[7] :
              v < 100 ? colors[8] : 'green';
            },
            sideColor: (index, feature) => {
              if (feature === feat) {
                return [164, 241, 199, 0.5];
              }
              var v = feature.properties.health * 100;
              return v < 40 ? colors[0] :
              v < 50 ? colors[1] :
              v < 55 ? colors[2] :
              v < 60 ? colors[3] :
              v < 65 ? colors[4] :
              v < 70 ? colors[5] :
              v < 75 ? colors[6] :
              v < 80 ? colors[7] :
              v < 100 ? colors[8] : 'green';
            },
            height: function (index, feature) {
              var v = feature.properties.health * 100;
              return v < 40 ? height[0] :
              v < 50 ? height[1] :
              v < 55 ? height[2] :
              v < 60 ? height[3] :
              v < 65 ? height[4] :
              v < 70 ? height[5] :
              v < 75 ? height[6] :
              v < 80 ? height[7] :
              v < 100 ? height[8] : 0;
            },
          });
        } else {
          text.hide();
        }
      });
      
      var dat = new Loca.Dat();
      dat.addLight(loca.ambLight, loca, '环境光');
      dat.addLight(loca.dirLight, loca, '平行光');
      dat.addLight(loca.pointLight, loca, '点光');
      dat.addLayer(pl);
      
      // 生长动画
      map.on('click', function () {
        pl.addAnimate({
          key: 'height',
          value: [0, 1],
          duration: 1000,
          easing: 'CubicInOut',
        }, function () {
          // console.log(123);
        });
      });
    }
}
</script>

<style>
  #Zoursmap {
            width: 100%;
  height: calc((100vh - 50px));
        }
        
        .demo-title {
          position: absolute;
          top: 25px;
          left: 25px;
          z-index: 1;
        }

        h1 {
          font-size: 18px;
          margin: 0;
          color: rgb(180, 180, 190);
        }

        h3 {
          font-size: 12px;
          font-weight: normal;
          margin-top: 5px;
          color: rgb(150,150,150);
        }
</style>